import React, { useState, useEffect, useRef } from 'react';
import { VariableSizeGrid} from 'react-window';
import ResizeObserver from 'rc-resize-observer';
import { Table } from 'antd';
import Config from '../../../Config';

const BaseTable = (props) => {
    const { columns = [], scroll = { y: 300}, autoHeight = Config.tableConfig.autoHeight, tableType } = props;
    const [tableWidth, setTableWidth] = useState(0);

    //获取 length - 1 的 width 总长度
    const getColumn = () => {
        if(!tableWidth) {return []};
        let widthCount = 0;
        columns.forEach((item) => {
            item.width && (widthCount += item.width);
        })
        let autoWidth = tableWidth - widthCount > 0 ? tableWidth - widthCount : Config.tableConfig.autoColWidth;
        
        const mergedColumns = columns.map((column) => {
            return column.width ? column : { ...column, width: autoWidth }
        });
        // tableType === 'list' && mergedColumns.unshift({
        //     title: <Checkbox />, dataIndex: 'input', width: 50,
        //     render: () => {
        //         return(
        //             <div className='ant-table-cell'>
        //                 <Checkbox />
        //             </div>
        //         )
        //     }
        // })
        return mergedColumns;
    }

    const mergedColumns = getColumn();

    const gridRef = useRef();

    // const [connectObject] = useState<any>(() => {
    //     const obj = {};
    //     Object.defineProperty(obj, 'scrollLeft', {
    //         get: () => null,
    //         set: (scrollLeft: number) => {
    //             if (gridRef.current) {
    //                 gridRef.current.scrollTo({ scrollLeft });
    //             }
    //         }
    //     });
    //     return obj;
    // });

    const resetVirtualGrid = () => {
        gridRef.current && gridRef.current.resetAfterIndices({
            columnIndex: 0,
            shouldForceUpdate: false,
        });
    };

    useEffect(() => {
        tableWidth && resetVirtualGrid()
    }, [tableWidth]);

    const renderVirtualList = (rawData, { scrollbarSize, onScroll }) => {
        // ref.current = connectObject;
        const totalHeight = rawData.length * autoHeight;
        return (
            <VariableSizeGrid
                ref = {gridRef}
                // className = "base-table-box"
                columnCount = {mergedColumns.length}
                columnWidth = {index => {
                    const { width } = mergedColumns[index];
                    return totalHeight > scroll.y && index === mergedColumns.length - 1
                        ? width - scrollbarSize - 1
                        : width;
                }}
                height = {scroll.y}
                rowCount = {rawData.length}
                rowHeight = {() => autoHeight}
                width = {tableWidth}
                onScroll = {({ scrollLeft }) => {
                    onScroll({ scrollLeft });
                }}
            >
                {
                    ({ columnIndex, rowIndex, style }) => (
                        <div
                            className = {'base-table-cell'}
                            style = {style}
                        >
                            {
                                mergedColumns[columnIndex].render ?
                                    mergedColumns[columnIndex].render(rawData[rowIndex][mergedColumns[columnIndex].dataIndex], rawData[rowIndex], rowIndex)
                                    : rawData[rowIndex][mergedColumns[columnIndex].dataIndex]}
                        </div>
                    )
                }
            </VariableSizeGrid>
        );
    };

    return (
        <ResizeObserver
            onResize={({ width }) => {
                setTableWidth(width);
            }}
        >
            <Table
                scroll = {scroll}
                {...props}
                // rowSelection={{
                //     type: 'checkbox',
                // }}
                //表格是否加载中 后续给到 api  ！！！！！！！！！！！！
                // loading = {mergedColumns.length > 0 ? false : true}
                className = "virtual-table"
                columns = {mergedColumns}
                pagination={false}
                components = {tableType === 'list' ? {
                    body: renderVirtualList,
                } : {}}
            />
        </ResizeObserver>
    );
}

export default BaseTable